<template>
  <div class="app-container">
    <!-- 顶部卡片组 -->
    <el-row :gutter="20" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">访问量</div>
            <count-to
              :start-val="0"
              :end-val="102400"
              :duration="2600"
              class="card-panel-num"
            />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('messages')">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="message" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">消息</div>
            <count-to
              :start-val="0"
              :end-val="81212"
              :duration="3000"
              class="card-panel-num"
            />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('purchases')">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">收入</div>
            <count-to
              :start-val="0"
              :end-val="9280"
              :duration="3200"
              class="card-panel-num"
            />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('shoppings')">
          <div class="card-panel-icon-wrapper icon-shopping">
            <svg-icon icon-class="shopping" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">订单</div>
            <count-to
              :start-val="0"
              :end-val="13600"
              :duration="3600"
              class="card-panel-num"
            />
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 数据卡片 -->
    <el-row :gutter="20" class="data-cards">
      <el-col
        :xs="24"
        :sm="12"
        :lg="6"
        v-for="(item, index) in cardData"
        :key="index"
        class="card-item-col"
      >
        <el-card shadow="hover" class="data-card">
          <template #header>
            <div class="card-header">
              <span class="card-title">{{ item.title }}</span>
              <el-tag :type="item.tagType" class="card-tag">
                {{ item.tagText }}
              </el-tag>
            </div>
          </template>

          <div class="card-content">
            <div class="card-value">
              {{ Math.round(item.count).toLocaleString() }}
            </div>
            <div class="card-icon">
              <svg-icon :icon-class="item.iconClass" />
            </div>
          </div>

          <div class="card-footer">
            <span class="footer-label">{{ item.dataDesc }}</span>
            <span class="footer-value">{{ Math.round(item.count * 15).toLocaleString() }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 新增：趋势图表区域 -->
    <el-row :gutter="20" class="chart-section">
      <el-col :xs="24" :sm="24" :md="16">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="chart-header">
              <span class="chart-title">访问趋势</span>
              <el-radio-group v-model="chartTimeRange" size="small">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="year">全年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-content">
            <!-- 这里放置图表组件 -->
            <div style="height: 300px;">图表区域</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="24" :md="8">
        <el-card class="rank-card" shadow="hover">
          <template #header>
            <div class="rank-header">
              <span>访问排行</span>
              <el-dropdown>
                <span class="el-dropdown-link">
                  更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>导出数据</el-dropdown-item>
                    <el-dropdown-item>生成报表</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
          <div class="rank-list">
            <div v-for="(item, index) in rankList" :key="index" class="rank-item">
              <span class="rank-index" :class="{ 'top-three': index < 3 }">{{ index + 1 }}</span>
              <span class="rank-name">{{ item.name }}</span>
              <span class="rank-value">{{ item.value }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 新增：任务列表和系统信息 -->
    <el-row :gutter="20" class="bottom-section">
      <el-col :xs="24" :sm="24" :md="16">
        <el-card class="task-card" shadow="hover">
          <template #header>
            <div class="task-header">
              <span>待办任务</span>
              <el-button type="primary" size="small" plain>查看全部</el-button>
            </div>
          </template>
          <el-table :data="taskList" style="width: 100%" :show-header="false">
            <el-table-column width="50">
              <template #default="scope">
                <el-checkbox v-model="scope.row.done" />
              </template>
            </el-table-column>
            <el-table-column prop="title">
              <template #default="scope">
                <span :class="{ 'task-done': scope.row.done }">{{ scope.row.title }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="priority" width="90">
              <template #default="scope">
                <el-tag :type="scope.row.priorityType" size="small">{{ scope.row.priority }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="deadline" width="120" align="right">
              <template #default="scope">
                <span class="task-deadline">{{ scope.row.deadline }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="24" :md="8">
        <el-card class="system-card" shadow="hover">
          <template #header>
            <div class="system-header">
              <span>系统信息</span>
              <el-button type="text" @click="refreshSystemInfo">
                <el-icon><Refresh /></el-icon>
              </el-button>
            </div>
          </template>
          <div class="system-info">
            <div class="info-item" v-for="(item, index) in systemInfo" :key="index">
              <span class="info-label">{{ item.label }}</span>
              <el-progress 
                :percentage="item.value" 
                :color="item.color"
                :stroke-width="8"
                :show-text="false"
              />
              <span class="info-value">{{ item.value }}%</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ArrowDown, Refresh } from '@element-plus/icons-vue';

// 图表时间范围
const chartTimeRange = ref('week');

// 排行榜数据
const rankList = reactive([
  { name: '首页', value: '12,234' },
  { name: '用户中心', value: '10,234' },
  { name: '订单管理', value: '8,234' },
  { name: '商品列表', value: '6,234' },
  { name: '数据统计', value: '4,234' },
]);

// 任务列表数据
const taskList = reactive([
  {
    title: '完成系统升级',
    done: false,
    priority: '紧急',
    priorityType: 'danger',
    deadline: '2024-03-20'
  },
  {
    title: '用户反馈处理',
    done: false,
    priority: '高',
    priorityType: 'warning',
    deadline: '2024-03-21'
  },
  {
    title: '数据备份',
    done: true,
    priority: '普通',
    priorityType: 'info',
    deadline: '2024-03-22'
  },
  {
    title: '性能优化',
    done: false,
    priority: '低',
    priorityType: 'success',
    deadline: '2024-03-23'
  }
]);

// 系统信息数据
const systemInfo = reactive([
  { label: 'CPU使用率', value: 65, color: '#409EFF' },
  { label: '内存使用率', value: 45, color: '#67C23A' },
  { label: '存储空间', value: 80, color: '#E6A23C' },
  { label: '带宽使用率', value: 30, color: '#909399' }
]);

// 刷新系统信息
const refreshSystemInfo = () => {
  // TODO: 实现刷新逻辑
  console.log('刷新系统信息');
};

// 原有的数据和方法保持不变...
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.panel-group {
  margin: 20px 0 32px;
  
  .card-panel-col {
    margin-bottom: 20px;
    transition: all 0.4s ease;
    
    &:hover {
      transform: translateY(-8px);
    }
  }

  .card-panel {
    position: relative;
    height: 120px;
    padding: 20px;
    border-radius: 15px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(45deg, #49a1f8, #3d7eea);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    // 添加光晕效果
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
      );
      transition: 0.5s;
    }

    &:hover {
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
      
      &::before {
        left: 100%;
      }

      .card-panel-icon-wrapper {
        transform: scale(1.1) translateY(-5px);
      }
    }

    // 为不同卡片设置不同的渐变背景
    &:nth-child(1) {
      background: linear-gradient(45deg, #36a3f7, #3d7eea);
    }

    &:nth-child(2) {
      background: linear-gradient(45deg, #47cfab, #36a3f7);
    }

    &:nth-child(3) {
      background: linear-gradient(45deg, #f6be1a, #f78c48);
    }

    &:nth-child(4) {
      background: linear-gradient(45deg, #f4516c, #f78c48);
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 5px 0 0 5px;
      padding: 16px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.15);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      backdrop-filter: blur(5px);
    }

    .card-panel-icon {
      float: left;
      font-size: 42px;
      color: #fff;
    }

    .card-panel-description {
      float: right;
      font-weight: 500;
      margin: 10px 15px 0 0;
      text-align: right;

      .card-panel-text {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.85);
        margin-bottom: 15px;
        line-height: 1.2;
      }

      .card-panel-num {
        font-size: 28px;
        color: #fff;
        font-weight: 600;
        letter-spacing: 1px;
        
        // 添加数字跳动动画
        &.animate__animated {
          animation: numberBounce 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }
      }
    }
  }
}

// 数字跳动动画
@keyframes numberBounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

// 响应式优化
@media screen and (max-width: 1400px) {
  .panel-group {
    .card-panel {
      height: 110px;
      padding: 15px;
      
      .card-panel-icon-wrapper {
        padding: 12px;
      }
      
      .card-panel-icon {
        font-size: 36px;
      }
      
      .card-panel-description {
        .card-panel-text {
          font-size: 14px;
          margin-bottom: 12px;
        }
        
        .card-panel-num {
          font-size: 24px;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .panel-group {
    .card-panel {
      height: 100px;
      padding: 12px;
      
      .card-panel-icon-wrapper {
        padding: 10px;
      }
      
      .card-panel-icon {
        font-size: 32px;
      }
      
      .card-panel-description {
        margin: 8px 10px 0 0;
        
        .card-panel-text {
          font-size: 13px;
          margin-bottom: 10px;
        }
        
        .card-panel-num {
          font-size: 20px;
        }
      }
    }
  }
}

// 数据卡片样式
.data-cards {
  .card-item-col {
    margin-bottom: 20px;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-4px);
    }
  }

  .data-card {
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: none;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);

    &:hover {
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    }

    :deep(.el-card__header) {
      padding: 15px 20px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-title {
    font-size: 15px;
    color: #606266;
    font-weight: 500;
  }

  .card-tag {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
  }

  .card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
  }

  .card-value {
    font-size: 28px;
    font-weight: 600;
    color: #303133;
    line-height: 1;
  }

  .card-icon {
    font-size: 32px;
    color: #409EFF;
    opacity: 0.8;
    transition: all 0.3s ease;

    &:hover {
      transform: scale(1.1);
      opacity: 1;
    }
  }

  .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px 15px;
    font-size: 13px;
    color: #909399;

    .footer-value {
      color: #606266;
      font-weight: 500;
    }
  }
}

// 响应式优化
@media (max-width: 1200px) {
  .card-value {
    font-size: 24px !important;
  }
  
  .card-icon {
    font-size: 28px !important;
  }
}

@media (max-width: 768px) {
  .panel-group {
    .card-panel-description {
      .card-panel-num {
        font-size: 20px;
      }
    }
  }
  
  .card-content {
    padding: 15px !important;
  }
  
  .card-value {
    font-size: 20px !important;
  }
}

// 新增样式
.chart-section {
  margin-bottom: 20px;
  
  .chart-card, .rank-card {
    height: 100%;
    border-radius: 12px;
    
    &:hover {
      transform: translateY(-4px);
      transition: all 0.3s ease;
    }
  }

  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .chart-title {
    font-size: 16px;
    font-weight: 500;
    color: #303133;
  }
}

.rank-list {
  .rank-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }
  }

  .rank-index {
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: #f5f7fa;
    border-radius: 4px;
    margin-right: 12px;
    font-size: 14px;
    color: #909399;

    &.top-three {
      color: #fff;
      background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
    }
  }

  .rank-name {
    flex: 1;
    color: #606266;
  }

  .rank-value {
    color: #409EFF;
    font-weight: 500;
  }
}

.bottom-section {
  .task-card, .system-card {
    border-radius: 12px;
    margin-bottom: 20px;
    
    &:hover {
      transform: translateY(-4px);
      transition: all 0.3s ease;
    }
  }

  .task-header, .system-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .task-done {
    text-decoration: line-through;
    color: #909399;
  }

  .task-deadline {
    color: #909399;
    font-size: 13px;
  }
}

.system-info {
  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .info-label {
    width: 100px;
    color: #606266;
  }

  .info-value {
    width: 50px;
    text-align: right;
    color: #409EFF;
    font-weight: 500;
  }

  :deep(.el-progress-bar) {
    flex: 1;
    margin: 0 12px;
  }
}

// 响应式优化
@media (max-width: 768px) {
  .chart-section, .bottom-section {
    .el-card {
      margin-bottom: 20px;
    }
  }
  
  .system-info {
    .info-label {
      width: 80px;
    }
  }
}
</style>